<!-- 搜索表单 -->
<template>
  <a-form
    :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
    :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
  >
    <a-row :gutter="8">
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="对讲账号">
          <a-input
            v-model:value.trim="form.deviceNo"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
      </a-col>
      <a-col>
        <a-form-item label="起止时间">
          <a-range-picker
            class="ele-fluid"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DDTHH:mm:ss"
            v-model:value="timeRange"
            :show-time="{
              format: 'HH:mm:ss'
            }"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
  import useFormData from '@/utils/use-form-data';
  import { ref } from '@vue/reactivity';

  const emit = defineEmits(['search']);

  // 表单数据
  const { form, resetFields } = useFormData({
    deviceNo: '',
    path: '',
    createNickname: '',
    createTimeStart: '',
    createTimeEnd: ''
  });
  const timeRange = ref([]);

  /* 搜索 */
  const search = () => {
    console.log('====search====timeRange===>',timeRange.value);
    if(timeRange.value.length===2){
      form.createTimeStart = timeRange.value[0].replace("T"," ");
      form.createTimeEnd = timeRange.value[1].replace("T"," ");
    }
    emit('search', form);
  };

  /*  重置 */
  const reset = () => {
    resetFields();
    search();
  };
</script>
